<template>
  <view class="user-info-container">
    <view class="header">
      <text class="title">个人信息</text>
    </view>
    
    <view class="info-card">
      <view class="avatar-section">
        <image :src="userInfo.avatar || '/static/default-avatar.png'" class="avatar" @tap="chooseAvatar" />
        <text class="avatar-tip">点击更换头像</text>
      </view>
      
      <view class="form-section">
        <view class="form-item">
          <text class="label">用户名</text>
          <input type="text" v-model="userInfo.username" disabled class="input" />
        </view>
        
        <view class="form-item">
          <text class="label">昵称</text>
          <input type="text" v-model="userInfo.nickname" class="input" />
        </view>
        
        <view class="form-item">
          <text class="label">邮箱</text>
          <input type="text" v-model="userInfo.email" class="input" />
        </view>
        
        <view class="form-item">
          <text class="label">手机号</text>
          <input type="text" v-model="userInfo.mobile" class="input" />
        </view>
      </view>
      
      <view class="button-group">
        <button class="btn btn-primary" @tap="saveUserInfo">保存修改</button>
        <button class="btn btn-secondary" @tap="goToChangePassword">修改密码</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserInfo, updateUser } from '@/api/user';

export default {
  data() {
    return {
      userInfo: {
        username: '',
        nickname: '',
        email: '',
        mobile: '',
        avatar: ''
      }
    };
  },
  
  onLoad() {
    this.loadUserInfo();
  },
  
  methods: {
    async loadUserInfo() {
      try {
        const res = await getUserInfo();
        if (res.code === 200) {
          this.userInfo = res.data;
        } else {
          uni.showToast({
            title: res.message || '获取用户信息失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.showToast({
          title: '获取用户信息失败',
          icon: 'none'
        });
      }
    },
    
    async saveUserInfo() {
      try {
        const res = await updateUser(this.userInfo);
        if (res.code === 200) {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
        } else {
          uni.showToast({
            title: res.message || '保存失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.showToast({
          title: '保存失败',
          icon: 'none'
        });
      }
    },
    
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          // TODO: 实现头像上传
          this.userInfo.avatar = tempFilePath;
        }
      });
    },
    
    goToChangePassword() {
      uni.navigateTo({
        url: '/pages/detail/change-password'
      });
    }
  }
};
</script>

<style lang="scss">
.user-info-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
  
  .header {
    padding: 20rpx 0;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .info-card {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-top: 20rpx;
    
    .avatar-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 40rpx;
      
      .avatar {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        margin-bottom: 20rpx;
      }
      
      .avatar-tip {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .form-section {
      .form-item {
        margin-bottom: 30rpx;
        
        .label {
          display: block;
          font-size: 28rpx;
          color: #666;
          margin-bottom: 10rpx;
        }
        
        .input {
          width: 100%;
          height: 80rpx;
          border: 1px solid #ddd;
          border-radius: 8rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
          
          &:disabled {
            background-color: #f5f5f5;
            color: #999;
          }
        }
      }
    }
    
    .button-group {
      margin-top: 40rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      
      .btn {
        width: 100%;
        height: 88rpx;
        border-radius: 44rpx;
        font-size: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &.btn-primary {
          background-color: #007AFF;
          color: #fff;
        }
        
        &.btn-secondary {
          background-color: #f5f5f5;
          color: #333;
        }
      }
    }
  }
}
</style> 